<template>
  <div class="test-tag">
    <h1>Tag 标签</h1>
    <p>对不同维度进行简单的标记和分类。</p>
    <h2>基础用法</h2>
    <div class="testTag">
      <Tag>标签一</Tag>
      <Tag type="success">标签二</Tag>
      <Tag type="normal">标签三</Tag>
      <Tag type="warning">标签四</Tag>
      <Tag type="error">标签五</Tag>
    </div>
    <p>由 <code>type</code> 属性来选择 <code>tag</code> 的类型</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tag&gt;标签一&lt;/Tag&gt;
        &lt;Tag type=&quot;success&quot;&gt;标签二&lt;/Tag&gt;
        &lt;Tag type=&quot;normal&quot;&gt;标签三&lt;/Tag&gt;
        &lt;Tag type=&quot;warning&quot;&gt;标签四&lt;/Tag&gt;
        &lt;Tag type=&quot;error&quot;&gt;标签五&lt;/Tag&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>圆角标签</h2>
    <div class="testTag">
      <Tag radius>标签一</Tag>
      <Tag type="success" radius>标签二</Tag>
      <Tag type="normal" radius>标签三</Tag>
      <Tag type="warning" radius>标签四</Tag>
      <Tag type="error" radius>标签五</Tag>
    </div>
    <p>添加 <code>radius</code> 属性，使标签成为圆角。 </p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tag radius&gt;标签一&lt;/Tag&gt;
        &lt;Tag type=&quot;success&quot; radius&gt;标签二&lt;/Tag&gt;
        &lt;Tag type=&quot;normal&quot; radius&gt;标签三&lt;/Tag&gt;
        &lt;Tag type=&quot;warning&quot; radius&gt;标签四&lt;/Tag&gt;
        &lt;Tag type=&quot;error&quot; radius&gt;标签五&lt;/Tag&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>不同尺寸</h2>
    <div class="testTag">
      <Tag>标签一</Tag>
      <Tag size="small">标签一</Tag>
    </div>
    <p>额外的尺寸： <code>small</code> ，通过设置 <code>size</code> 属性来配置它们。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tag&gt;标签一&lt;/Tag&gt;
        &lt;Tag size=&quot;small&quot;&gt;标签一&lt;/Tag&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>可移除标签</h2>
    <div style="margin:20px 0;">
      <Tag clearable v-if="show1" @on-close="show1 = false" >标签一</Tag>
      <Tag type="success" clearable v-if="show2" @on-close="show2 = false">标签二</Tag>
      <Tag type="normal" clearable v-if="show3" @on-close="show3 = false">标签三</Tag>
      <Tag type="warning" clearable v-if="show4" @on-close="show4 = false">标签四</Tag>
      <Tag type="error" clearable v-if="show5" @on-close="show5 = false">标签五</Tag>
    </div>
    <p>设置 <code>clearable</code> 属性可以定义一个标签是否可移除。它接受一个 <code>Boolean</code>，<code>true</code> 为关闭。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tag clearable v-if=&quot;show1&quot; @on-close=&quot;show1 = false&quot; &gt;标签一&lt;/Tag&gt;
        &lt;Tag type=&quot;success&quot; clearable v-if=&quot;show2&quot; @on-close=&quot;show2 = false&quot;&gt;标签二&lt;/Tag&gt;
        &lt;Tag type=&quot;normal&quot; clearable v-if=&quot;show3&quot; @on-close=&quot;show3 = false&quot;&gt;标签三&lt;/Tag&gt;
        &lt;Tag type=&quot;warning&quot; clearable v-if=&quot;show4&quot; @on-close=&quot;show4 = false&quot;&gt;标签四&lt;/Tag&gt;
        &lt;Tag type=&quot;error&quot; clearable v-if=&quot;show5&quot; @on-close=&quot;show5 = false&quot;&gt;标签五&lt;/Tag&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {
        data () {
          return {
            show1: true,
            show2: true,
            show3: true,
            show4: true,
            show5: true
          }
        }
      }
      &lt;/script&gt;
    </pre>
    <h2>带 Icon 的标签</h2>
    <div style="margin:20px 0;">
      <Tag prefix="icon-upper-shelf">商品上架</Tag>
      <Tag prefix="icon-lower-shelf" type="warning">商品下架</Tag>
      <Tag prefix="icon-ios-delete" type="error">删除商品</Tag>
    </div>
    <p>设置 <code>prefix</code> 属性，值为 <code>Icon</code> 名称，默认居左显示。</p>
    <p>代码示例：</p>
    <pre>
      &lt;template&gt;
        &lt;Tag prefix=&quot;icon-upper-shelf&quot;&gt;商品上架&lt;/Tag&gt;
        &lt;Tag prefix=&quot;icon-lower-shelf&quot; type=&quot;warning&quot;&gt;商品下架&lt;/Tag&gt;
        &lt;Tag prefix=&quot;icon-ios-delete&quot; type=&quot;error&quot;&gt;删除商品&lt;/Tag&gt;
      &lt;/template&gt;
      &lt;script&gt;
      export default {

      }
      &lt;/script&gt;
    </pre>
    <h2>API</h2>
    <p>Tag props</p>
    <Table :columns="tableColumn" :data="tableData"></Table>
    <br>
    <p>Tag events</p>
    <Table :columns="tableColumn1" :data="tableData1"></Table>
  </div>
</template>

<script>
export default {
  name: 'test-tag',
  data () {
    return {
      tableColumn: [
        {
          title: '属性',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '类型',
          key: 'type',
          tooltip: true
        },
        {
          title: '默认值',
          key: 'default'
        }
      ],
      tableColumn1: [
        {
          title: '事件名称',
          key: 'attribute'
        },
        {
          title: '说明',
          key: 'explain'
        },
        {
          title: '回调参数',
          key: 'callBack'
        }
      ],
      tableData: [
        {
          attribute: 'type',
          explain: '标签样式',
          type: 'String | primary, success, warning, error, normal',
          default: 'primary'
        },
        {
          attribute: 'size',
          explain: '标签的大小',
          type: 'String | large, small, default',
          default: 'default'
        },
        {
          attribute: 'radius',
          explain: '标签是否圆角显示',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'clearable',
          explain: '标签是否可关闭',
          type: 'Boolean',
          default: 'false'
        },
        {
          attribute: 'prefix',
          explain: '标签是否带Icon',
          type: 'String',
          default: '-'
        }
      ],
      tableData1: [
        {
          attribute: 'on-close',
          explain: '关闭tag时触发的事件',
          callBack: '-'
        }
      ],
      show1: true,
      show2: true,
      show3: true,
      show4: true,
      show5: true
    }
  },
  computed: {

  },
  created () {

  },
  mounted () {

  },
  watch: {

  },
  methods: {

  }
}
</script>

<style scoped lang="less">
.test-tag {
  li {
    padding: 10px;
    .sh-tag {
      margin-right: 20px;
    }
  }
}
.testTag {
  width: 500px;
  height: 60px;
  display:flex;
  align-items: center;
}
h1 {
  font-size: 18px;
  padding: 10px 0;
}
h2 {
  font-size: 14px;
  padding: 10px 0;
}
p{
  padding: 10px 0;
}
code {
  background-color: #aaa;
}
pre {
  font-size: 14px;
}
span {
  margin-left: 10px;
}
p {
  padding: 5px 0;
}
</style>
